<template>
    <div class="news-container">
    <!-- 左侧新闻标题列表 -->
    <div class="news-titles">
      <ul>
        <li v-for="d in data" :key="d.id">
			<!-- 传参的第一种方式：在请求url中添加 -->
			<!-- <RouterLink :to="`/news/newDetail/${d.id}/${d.title}/${d.content}`">{{ d.title }}</RouterLink> -->
			 <!-- 传参的第二种方式：在对象属性中添加 -->
			<RouterLink replace :to="{ // replace: 添加之后，会点击会替换原有的历史记录，从而在浏览器上无法后退
					name:'xinwenxiangqing', // params模式下，这里必须使用name而不是path
					params: {
						id: d.id,
						title: d.title,
						content: d.content
					}
				}">
				{{ d.title }}
			</RouterLink>
		</li>
      </ul>
    </div>

    <!-- 右侧新闻内容 -->
    <div class="news-content">
		<RouterView/>
    </div>
  </div>
</template>

<script lang="ts" setup name="news">
  	import { reactive} from 'vue';
	import { RouterView, RouterLink } from 'vue-router';
	const data = reactive([
		{
			id: "a01",
			title: "🐶 小狗完成马拉松比赛",
			content: "一只可爱的小狗与它的主人一起完成了42公里的马拉松比赛。这只狗狗不仅完成了比赛，还获得了观众的热烈掌声！"
		},
		{
			id: "a02",
			title: "🐕 养狗对心脏健康有益",
			content: "最新研究表明，养狗可以显著降低心脏病发作的风险。与狗狗一起散步有助于保持日常锻炼。"
		},
		{
			id: "a03",
			title: "🐩 狗狗穿衣秀火爆全网",
			content: "一位网友分享了狗狗的时装秀视频，短短几小时内浏览量突破百万，网友纷纷点赞表示狗狗们太可爱了！"
		}
	])
</script>

<style scoped>
.news-container {
  display: flex;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* 左侧标题列表样式 */
.news-titles {
  width: 30%;
  background-color: #ffe0b2;
  padding: 20px;
  border-right: 2px solid #ffa726;
}

.news-titles ul {
  list-style: none;
  padding: 0;
}

.news-titles li {
  padding: 10px;
  margin: 10px 0;
  background-color: #ffcc80;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.news-titles li:hover {
  background-color: #ffa726;
  color: white;
}

.news-titles .active {
  background-color: #ff9800;
  color: white;
}

/* 右侧内容区域样式 */
.news-content {
  width: 70%;
  padding: 30px;
  text-align: left;
  background-color: white;
}

.news-content h2 {
  margin-bottom: 15px;
  color: #ff7043;
}

.news-content p {
  font-size: 18px;
  line-height: 1.6;
  color: #666;
}
</style>